<template>
  <!-- 所有的元素，必须不能在根元素下,需要标签包裹 -->
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>
</template>

<script>
  //声明axios
  const axios = require('axios');
  export default {
    props: ['id'],
    name: "proFile",
    /**
     * to：路由将要跳转的路径
     * from：路径跳转前的路径
     * next：路由的控制参数
     * next()：跳入下一个页面
     * next('path')：改变路由的跳转方向，使其跳到另一个路由
     * next(false)：返回原来的页面
     * next((vm)=>{})：仅在 beforeRouteEnter 中可用，vm是组件实例
     */
    beforeRouteEnter:(to,from,next)=>{
        console.log("进入之前");//加载数据
        next(vm => {
          vm.getData();//进入路由之前执行getData方法
        });
    },
    beforeRouteLeave:(to,from,next)=>{
      console.log("进入之后");
      next();
    },
    methods: {
      getData: function () {
        axios.get("http://localhost:8080/static/mock/data.json")
          .then(function (result) {
          console.log(result);
        })
        // axios({
        //   method: "get",
        //   url:"http://localhost:8080/static/mock/data.json"
        // }).then(function (result) {
        //   console.log(result);
        // })
      }
    }
  }
</script>

<style scoped>

</style>
